<!doctype html>
<html class="no-js" lang="">
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<title>根据点击位置路径弹出动画插件-cta.js| jQuery特效|手机微信网站特效| 网页特效库</title>
		<meta name="keywords" content="SVG特效, 手机微信网站特效, css3动画, html5特效, 网页特效" />
		<meta name="description" content="网页特效库-专注于HTML5、CSS3、js、jQuery、手机移动端等网页特效的手机与分享。特效库始终坚持：无会员、无积分、无限制的“三无原则”，所有的资源都免费提供广大童鞋下载学习和使用。" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<link rel="image_src" href="hint.png"/>
		<style>
		* {
			box-sizing: border-box;
		}
		html, body {
			font-family: 'Open Sans', sans-serif;
			background: #3F51B5;
			color: white;
			text-align: center;
			margin: 0;
		}
		p, .content-wrap {
			max-width: 770px;
			margin: 0 auto;
		}
		p {
			font-size: 24px;
			margin: 0 auto 30px;
			padding: 0 40px;
		}
		h1, h2 { font-weight: bold; }
		h2 {
			font-size: 40px;
		}
		a { color: #FFD200; }
		a:hover { text-decoration: none; }
		section {
			padding: 30px 0;
		}
		.section--white {
			background: white;
			color: #555;
		}
		.disable-mouse {
			pointer-events: none;
		}
		body.disable-scroll {
			overflow: hidden;
		      	height: 100%;
		}
		.main-title {
			color: white;
			font-size: 100px;
		}
		.btn, .tile {
			display: inline-block;
			text-decoration: none;
			padding: 16px;
			background: #EA006F;
			color: white;
			opacity: 0.85;
			cursor: pointer;
			transition: 0.25s ease;
		}
		.download-btn {
			background: white;
			color: #3F51B5;
			font-size: 30px;
		}
		.btn--blue {
			background: #4A90E2;
		}
		.tile {
			width: 33.333%;
			float: left;
			height: 150px;
		}
		.tile-container {
			overflow: hidden;
		}
		.btn:hover,
		.tile:hover {
			opacity: 1;
		}
		.tile:nth-child(2) { background: #4A90E2; }
		.tile:nth-child(3) { background: #FFD200; }
		.tile:nth-child(4) { background: #4CBB47; }
		.tile:nth-child(5) { background: #362A6C; }
		.tile:nth-child(6) { background: #4CBB47; }

		.modal {
			position: fixed;
			top: 0;
			bottom: 0;
			left: 0;
			right: 0;
			padding: 40px;
			background: #EA006F;
			color: white;
			z-index: 1;
			visibility: hidden;
			opacity: 0;
			pointer-events: none;
                	transition: 200ms ease;
        		overflow: auto;
		}

		.modal-close-btn {
			display: block;
			position: absolute;
			top: 0;
			right: 0;
			background: url(img/close.png) no-repeat center;
			width: 32px;
			height: 32px;
			padding: 32px;
			opacity: 0.8;
			cursor: pointer;
			transition: 0.3s ease;
		}
		.modal-close-btn:hover {
			opacity: 1;
		}
		.modal--2 { background: #4A90E2; }
		.modal--3 { background: #FFD200; }
		.modal--4 { background: #4CBB47; }
		.modal--5 { background: #362A6C; }
		.modal.show {
			opacity: 1;
			visibility: visible;
			pointer-events: auto;
		}
		.dialog {
			background: #4A90E2;
			min-width: 300px;
			left: 50%;
			right: auto;
			top: 30%;
			bottom: auto;
			box-shadow: 0 0 0 3000px rgba(0,0,0,0.4);
			-webkit-transform: translateX(-50%);
			transform: translateX(-50%);
		}
		.sidebar {
			left: auto;
			width: 300px;
			background: #8BC34A;
			-webkit-transform: translateX(100%);
			transform: translateX(100%);
			opacity: 1;
			visibility: visible;
		}
		.sidebar.show {
			-webkit-transform: translateX(0);
			transform: translateX(0);
		}
		.sidebar__block {
			border-radius: 5px;
			background: white;
			opacity: 0.3;
			margin-top: 32px;
		}
		.quote-box__bubble {
			position: relative;
			background: white;
			padding: 16px;
			color: #555;
			border-radius: 5px;
			max-width: 480px;
			margin: 0 auto 20px;
		}
		.quote-box__bubble:after {
			content: '';
			display: block;
			position: absolute;
			top: 100%;
			left: 50%;
			width: 0;
			height: 0;
			border: 10px solid transparent;
			border-top-color: white;
			border-top-width: 10px;
		}

		footer {
			padding: 50px 0 20px;
		}
		.footer-text {
			opacity: 0.7;
			margin-top: 20px;
		}
		</style>
	</head>
	<body>
		<h1 class="main-title">cta.js</h1>
		<p>
			cta.js or "Call to Animation" is a light-weight performant library to animate your "action-to-effect" paths.
		</p>



		<section class="section--white" style="margin-top: 40px;">
			<h2>What can I use it for?</h2>
			<p>Navigation in tile based apps</p>
			<small>Click any tile below</small>
			<div class="tile-container">
				<div class="tile" data-cta-target=".js-modal-1" data-disable-scroll=true></div>
				<div class="tile" data-cta-target=".js-modal-2" data-disable-scroll=true></div>
				<div class="tile" data-cta-target=".js-modal-3" data-disable-scroll=true></div>
				<div class="tile" data-cta-target=".js-modal-4" data-disable-scroll=true></div>
				<div class="tile" data-cta-target=".js-modal-5" style="width: 16.666%" data-disable-scroll=true></div>
				<div class="tile" data-cta-target=".js-modal-3" data-disable-scroll=true></div>
				<div class="tile" data-cta-target=".js-modal-5" style="width: 16.666%" data-disable-scroll=true></div>
			</div>
		</section>

		<section class="section--white">
			<p>Opening modals on button clicks</p>
			<div class="btn" data-cta-target=".js-dialog" data-disable-scroll=true style="background: #4A90E2">Click for awesomeness</div>
		</section>

		<section class="section--white">
			<p>Opening sidebars</p>
			<div class="btn" data-cta-target=".js-sidebar">OPEN</div>
		</section>
		<section class="section--white">
			<p>And just about anything...imagination is the limit</p>
		</section>



		<div class="js-modal-1  modal  modal--1">
			<span class="modal-close-btn"></span>
			<h1>Visual Continuity</h1>

			<div class="quote-box">
				<div class="quote-box__bubble">Transitioning between two visual states should be clear, smooth and effortless and not confuse the user. A well-designed transition does the heavy lifting and enables the user to clearly understand where their attention should be focused.</div>
				<a href="http://www.google.co.in/design/spec/animation/meaningful-transitions.html#meaningful-transitions-visual-continuity">Google Material design</a>
			</div>
		</div>
		<div class="js-modal-2  modal  modal--2">
			<span class="modal-close-btn"></span>
			<h1>Share it if you like it</h1>
			<br><br>
			<a href="https://twitter.com/share" class="twitter-share-button" data-size="large" data-via="chinchang457" data-related="chinchang457" data-hashtags="animate,javascript">Tweet</a>
		</div>
		<div class="js-modal-3  modal  modal--3">
			<span class="modal-close-btn"></span>
			<h1>Customary cat!</h1>
			<img src="img/cat.jpg" width="300" alt="">
			<p>You found me :)</p>
		</div>
		<div class="js-modal-4  modal  modal--4">
			<span class="modal-close-btn"></span>

			<h1>Hierarchical timing</h1>
			<div class="quote-box">
				<div class="quote-box__bubble">When building a transition, consider the order and timing of the elements' movement. Ensure that motion supports the information hierarchy, conveying what content is most important by creating a path for the eye to follow.</div>
				<a href="http://www.google.co.in/design/spec/animation/meaningful-transitions.html#meaningful-transitions-hierarchical-timing">Google Material design</a>
			</div>
		</div>
		<div class="js-modal-5  modal  modal--5">
			<span class="modal-close-btn"></span>

			<h1>Consistent choreography</h1>
			<div class="quote-box">
				<div class="quote-box__bubble">A well-choreographed app also provides teachable moments. When transitioning elements are coordinated, the user's understanding of the app grows. They "get" the app; they don't feel disoriented by the animation.</div>
				<a href="http://www.google.co.in/design/spec/animation/meaningful-transitions.html#meaningful-transitions-consistent-choreography">Google Material design</a>
			</div>
		</div>

		<div class="js-dialog  modal  dialog" style="text-align: center;">
			<span class="modal-close-btn"></span>
			<h3>Do you think this is Awesome?</h3>
			<br>
			<a onclick="closeShowingModal(); return;" class="btn  btn--blue">Yes</a>
			<a onclick="closeShowingModal(); return;" class="btn  btn--blue">No</a>

		</div>

		<div class="js-sidebar  modal sidebar">
			<span class="modal-close-btn"></span>
			<div class="sidebar__block" style="height:20%"></div>
			<div class="sidebar__block" style="height:40%"></div>
			<div class="sidebar__block" style="height:20%"></div>
		</div>
		<script src="src/cta.js"></script>
		<script>
		var closeFn;
		function closeShowingModal() {
			var showingModal = document.querySelector('.modal.show');
			if (!showingModal) return;
			showingModal.classList.remove('show');
			document.body.classList.remove('disable-mouse');
			document.body.classList.remove('disable-scroll');
			if (closeFn) {
				closeFn();
				closeFn = null;
			}
		}
		document.addEventListener('click', function (e) {
			var target = e.target;
			console.log(target.dataset.ctaTarget);
			if (target.dataset.ctaTarget) {
				closeFn = cta(target, document.querySelector(target.dataset.ctaTarget), { relativeToWindow: true }, function showModal(modal) {
					modal.classList.add('show');
					document.body.classList.add('disable-mouse');
					if(target.dataset.disableScroll){
						document.body.classList.add('disable-scroll');
					}
				});
			}
			else if (target.classList.contains('modal-close-btn')) {
				closeShowingModal();
			}
		});
		document.addEventListener('keyup', function (e) {
			if (e.which === 27) {
				closeShowingModal();
			}
		})
		</script>


	</body>
</html>
